$(function () {
    //禁止选中文字
    document.addEventListener('contextmenu',function(e) {
        e.preventDefault()
    })
    document.addEventListener('selectstart',function(e) {
        e.preventDefault()
    })
    // 背景星星
    const star = {
        init () {
            for(let i =0;i<20;i++) {
                this.newStar()
            }
            setInterval(() => {
                $('.star').eq(0).remove()
                this.newStar()
            }, 8000)
        },
        newStar () {
            let star = $('<div class="star"></div')
            star.css('top',randomNum(1,98) + '%')
            star.css('left',randomNum(1,98) + '%')
            let wh = randomNum(2,12)
            let delayTime = randomNum(0,6)
            star.css('width',wh + 'px')
            star.css('height',wh + 'px')
            star.css('animation-delay',delayTime + 's')
            $('.star-sky').append(star)
        }
    }
    const coverBall = {
        ballTop:0,
        ballLeft:0,
        ballWidth:0,
        ballHeight:0,
        wrapWidth:0,
        wrapHeight:0,
        speedX:8,
        speedY:8,
        timer: null,
        init () {
            this.ballTop = $('.cover-ball').position().top
            this.ballLeft = $('.cover-ball').position().left
            this.ballWidth = $('.cover-ball').innerWidth()
            this.ballHeight = $('.cover-ball').innerHeight()
            this.wrapWidth = $('.cover-ball-wrap').innerWidth()
            this.wrapHeight = $('.cover-ball-wrap').innerHeight()
        },
        move() {
            this.timer = setInterval(() => {
                this.ballTop += this.speedY
                this.ballLeft += this.speedX
                if (this.ballTop >= this.wrapHeight - this.ballHeight || this.ballTop <= 0 ) {
                    this.speedY = -this.speedY
                }
                if (this.ballLeft >= this.wrapWidth - this.ballWidth || this.ballLeft <= 0 ) {
                    this.speedX = -this.speedX
                }
                $('.cover-ball').css('top', this.ballTop + 'px')
                $('.cover-ball').css('left', this.ballLeft + 'px')
            },33)
        }
    }
    const game = {
        gameWrapWidth:0,
        gameWrapHeight:0,
        wallLeft: 0,
        wallTimer:null,
        wallFlag: true,
        ballNum: 0,
        newBallTimer:null,
        blockWidth:80,
        blockHeight: 20,
        blockX: 5,
        blockY: 100,
        colorList:['#FFD700','#FF0000','#7FFFD4','ff0099','#99ffff','#DBDBDB','#DB7093','#ffff33'],
        startGame () {
            clearInterval(coverBall.timer)
            $('#cover').css('display', 'none')
            $('#game-wrap').css('display','block')
            this.gameWrapWidth = $('#game-wrap').outerWidth()
            this.gameWrapHeight = $('#game-wrap').outerHeight()
            this.wallLeft = $('#wall').position().left
            this.newBall()
            this.newBlock()
        },
        init () {
            $('#start-game-btn').on('click',this.startGame.bind(this))
            $('body').on('keydown',this.wallMove.bind(this))
            $('body').on('keyup',this.wallStop.bind(this))
        },
        newBall () {
            var ball = $('<div class="ball"></div>')
            $('#game-wrap').append(ball)
            this.ballNum ++
            this.move(ball)
            this.newBallTimer = setInterval(() => {
                var ball = $('<div class="ball"></div>')
                ball.css('backgroundColor',this.colorList[randomNum(0,7)])
                let wh = randomNum(15,35)
                ball.css('width',wh + 'px')
                ball.css('height',wh + 'px')
            $('#game-wrap').append(ball)
            this.ballNum ++
            this.move(ball)
            },5000)
        },
        move (ball) {
            let speedX = randomNum(-8,8)
            let speedY = randomNum(-10,-6)
            let ballTop = ball.position().top
            let ballLeft = ball.position().left
            let ballHeight = ball.innerHeight()
            let ballWidth = ball.innerWidth()
            let color = ball.css('background-color')
            let timer = setInterval(() => {
                ballTop += speedY
                ballLeft += speedX
                if ( ballTop <= 0 ) {
                    speedY = -speedY
                }
                if (ballTop >= this.gameWrapHeight - ballHeight - 15) {
                    if (ballLeft - this.wallLeft < 100 && this.wallLeft - ballLeft < ballWidth ) {
                        speedY = -speedY
                    }
                } 
                 if (ballLeft >= this.gameWrapWidth - ballWidth - 15 || ballLeft <= 0 ) {
                    speedX = -speedX
                } 
                 if (ballTop >= this.gameWrapHeight - ballHeight) {
                    clearInterval(timer)
                    ball.remove()
                }
                if (ballLeft + ballWidth >= this.blockX && ballLeft <= this.blockX  + this.blockWidth) {
                    if (ballTop + ballHeight >= this.blockY && ballTop <= this.blockY + this.blockHeight) {
                        speedY = -speedY
                        $('.block').css('background-color', color)
                    }
                }
                ball.css('top', ballTop + 'px')
                ball.css('left', ballLeft + 'px')
            },22)
        },
        newBlock () {
            let x = randomNum(5, this.gameWrapWidth - this.blockWidth - 5)
            let y = this.blockY
            let color = this.colorList[randomNum(0,7)]
            this.blockX = x
            const block = $('<div class="block"></div>')
            block.css('left', x + 'px')
            block.css('top'. y + 'px')
            block.css('background-color', color)
            $('#game-wrap').append(block)
            this.blockMove(block)
        },
        blockMove (block) {
            let speed = randomNum(0,1) ? randomNum(5,10) : randomNum(-5, -10)
            let maxX = this.gameWrapWidth - this.blockWidth - 5
            setInterval(() => {
                // let oldLeft = block.position().left
                this.blockX = this.blockX + speed
                if (this.blockX <= 5 || this.blockX >= maxX) {
                    speed = -speed
                }
                block.css('left', this.blockX + 'px')
            }, 20)
        },
        wallMove (e) {
            if (!this.wallFlag) return
            // console.log(e.keyCode) // 37 39
                this.wallFlag = false
                if (e.keyCode === 39) {
                    this.wallTimer = setInterval(() => {
                        if (this.wallLeft >= this.gameWrapWidth - 119) {
                            clearInterval(this.wallTimer)
                            return
                        }
                        this.wallLeft += 12
                        $('#wall').css('left',this.wallLeft + 'px')
                    },11)
                } else if (e.keyCode === 37) {
                    this.wallTimer = setInterval(() => {
                        if (this.wallLeft <= 0) {
                            clearInterval(this.wallTimer)
                            return
                        }
                        this.wallLeft -= 12
                        $('#wall').css('left',this.wallLeft + 'px')
                    },11)
                }
        },
        wallStop () {
            clearInterval(this.wallTimer)
            this.wallFlag = true
        }
    }
    star.init()
    coverBall.init()
    coverBall.move()
    game.init()
})